<template>
  <div class="nav-bar" :style="{ backgroundColor: bgColor }">
    <div class="nav-content">
      <!-- 左侧返回按钮 -->
      <div class="nav-left" @click="handleBack" v-if="showBack">
        <van-icon name="arrow-left" size="20" color="#333" />
      </div>
      
      <!-- 标题 -->
      <div class="nav-title">
        <slot name="title">{{ title }}</slot>
      </div>
      
      <!-- 右侧操作区域 -->
      <div class="nav-right">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

interface Props {
  title?: string
  showBack?: boolean
  bgColor?: string
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  showBack: true,
  bgColor: '#636DEA'
})

const router = useRouter()

const handleBack = () => {
  if (window.history.length > 1) {
    router.back()
  } else {
    router.push('/')
  }
}
</script>

<style scoped>
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 999;
  height: 44px;
  background-color: #636DEA;
  color: white;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px;
  position: relative;
}

.nav-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  margin-left: -8px;
}

.nav-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 500;
  color: white;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>